<template>
  <el-color-picker
    v-model="fontColor"
    :predefine="['#fff', '#000']"
    class="theme-picker"
    popper-class="theme-picker-dropdown"
  />
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      chalk: '', // content of theme-chalk css
      fontColor: ''
    }
  },
  computed: {
    ...mapGetters(["systemInfo"]),
    defaultFontColor() {
      return this.systemInfo.colorValue
    }
  },
  watch: {
    defaultFontColor: {
      handler: function(val, oldVal) {
        this.fontColor = val
      },
      immediate: true
    },
    fontColor(val) {
      this.setFontColor(val)
    }
  },
  created() {
    this.fontColor = this.systemInfo.colorValue || "#fff";
  },

  methods: {
    setFontColor(val){
      this.$emit('change', val)
    }
  }
}
</script>

<style>
.theme-message,
.theme-picker-dropdown {
  z-index: 99999 !important;
}

.theme-picker .el-color-picker__trigger {
  height: 26px !important;
  width: 26px !important;
  padding: 2px;
}

.theme-picker-dropdown .el-color-dropdown__link-btn {
  display: none;
}
</style>
